{include file="public_head" /}
<!-- upload -->
<link href="__STATIC__/css/uploads.css" rel="stylesheet">
<!-- Select2 -->
<link href="__STATIC__/css/select/select2.min.css" rel="stylesheet">
<style>
    .table{
        background-color: #cafffa;
    }
    .selected{
        border: 1px solid blue;
    }
    .buttons,button,.btn{
        margin-bottom: 0;
    }
</style>

<body class="nav-md">

<div class="container body">

    <div class="main_container">

        {include file="public_sidebar,public_nav" /}
        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">

                <div class="page-title">
                    <div class="title_left">
                        <h3>商品套餐管理</h3>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{$mate_title}
                                    <!--<small>different form elements</small>-->
                                </h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <br/>
                                <form class="form-horizontal form-label-left" enctype="multipart/form-data" action="{:url('client/shopGoodsCombo/create_combo')}" onsubmit="return checkData()" method="post" id="registerForm">

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">套餐标题：</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="hidden"  name="shop_id" value="{:session('shop_id')}" />
                                            <input type="text" placeholder="请输入套餐标题(10字以内)"
                                                   class="form-control col-md-7 col-xs-12" name="title"
                                                   value="{$item.title|default=''}"
                                                   datatype="*" nullmsg="请输入标题！" errormsg="请输入套餐！">
                                        </div>
                                    </div>

                                    <div class="divider-dashed"></div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">分类筛选：</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <select id="lev_1" class="form-control" tabindex="-1" onchange="linkage_1()">
                                                {volist name='shopClassify' id='shopClassData'}

                                                <option value="{$shopClassData.id}" {eq name=':input("shop_class_id")' value='$shopClassData.id'} selected {/eq}>
                                                {neq name="shopClassData.parenTid" value="0"}
                                                {:str_repeat('　',$shopClassData['count'])}
                                                {/neq}
                                                {eq name="shopClassData.parenTid" value="0"}
                                                <span>&nbsp;</span>
                                                {else /}
                                                <span>&nbsp;</span>
                                                {/eq}
                                                {neq name="shopClassData.count" value="1"}|&nbsp;--&nbsp;{/neq}
                                                {$shopClassData.title}
                                                </option>
                                                {/volist}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="divider-dashed"></div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">选择套餐商品：</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <span id="span_1"></span>
                                        </div>
                                    </div>

                                    <div class="divider-dashed"></div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">选中的商品列表：</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12" style="width: 70%">
                                            <table style="border-bottom:1px solid #ddd;width: 100%;"
                                                   class="table table-striped table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th width="6%">排序</th>
                                                    <th>分类</th>
                                                    <th>商品名称</th>
                                                    <th>已选属性</th>
                                                    <th>商品原价</th>
                                                    <th>商品市场价</th>
                                                    <th>运费</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody id="content">
                                                </tbody>
                                                <tbody align="left">
                                                <tr>
                                                    <td colspan="8">
                                                        <span style="float: right;">总计:&yen;<font id="total"></font></span>
                                                        <input type="hidden" name="total" />
                                                        <span style="float: right;margin-right: 5%;">运费总计:&yen;<font id="total_2"></font></span>
                                                        <span style="float: right;margin-right: 5%;">套餐价总计:&yen;<font id="total_1"></font></span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                                </table>
                                        </div>
                                    </div>

                                    <div class="divider-dashed"></div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">套餐价格：</label>
                                        <div class="col-md-1 col-sm-6 col-xs-12">
                                            <input type="text" placeholder="请填写套餐价格"
                                                   class="form-control col-md-7 col-xs-12" name="combo_price"
                                                   value="{$item.sort|default='0'}">
                                        </div>
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                            <i class="fa fa-bullhorn"></i> 若套餐价高于原商品总价,则按原商品总价计</label>
                                    </div>

                                    <div class="divider-dashed"></div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">使用区间时间：</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="text" placeholder="请选择时间区间" readonly
                                                   class="form-control col-md-7 col-xs-12" name="interval_timer"
                                                   id="interval_timer"
                                                   {present name="$item.id"}
                                                   value="{$item.start_time|date='Y-m-d',###} / {$item.end_time|date='Y-m-d',###}"
                                                   {/present} datatype="*" nullmsg="请选择时间区间！" errormsg="请选择时间区间！">
                                        </div>
                                    </div>
                                    <div class="divider-dashed"></div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">启用状态：</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label class="radio_box">
                                                <input type="radio" name="status" id="status_1" class="cartradio"
                                                       value="1"
                                                       datatype="*"
                                                       nullmsg="请选择启用状态！" errormsg="请选择启用状态！"
                                                       {eq name='item.status|default=""' value='1' }
                                                       checked
                                                       {/eq}
                                                >&nbsp;&nbsp;
                                                <label for="status_1"></label>
                                                <span>启用</span>
                                                &nbsp;&nbsp;
                                            </label>
                                            <label class="radio_box">
                                                <input type="radio" name="status" id="status_2" class="cartradio"
                                                       value="0"
                                                       datatype="*"
                                                       nullmsg="请选择启用状态！" errormsg="请选择启用状态！"
                                                       {eq name='item.status|default=""' value='0' }
                                                       checked
                                                       {/eq}
                                                >&nbsp;&nbsp;
                                                <label for="status_2"></label>
                                                <span>禁用</span>
                                                &nbsp;&nbsp;
                                            </label>
                                        </div>
                                    </div>

                                    <div class="container">
                                        <div class="row clearfix">
                                            <div class="col-md-12 column">
                                                <div class="modal fade" id="modal-container-680565" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                <h4 class="modal-title" id="myModalLabel">
                                                                    属性选择
                                                                </h4>
                                                            </div>
                                                            <div class="modal-body" >
                                                                <div style="width: 100%;" id="attr_content"></div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" onclick="saveData()" data-dismiss="modal" class="btn btn-primary">保存</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ln_solid"></div>

                                    <div class="form-group">
                                        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                            {present name="$item.id"}
                                            <input type="hidden" name="id" value="{$item.id}">
                                            <input type="hidden" name="repId" id="repId" value="{$item.parenTid}" />
                                            {/present}
                                            <button type="submit" class="btn btn-primary">提交</button>
                                            <a type="reset" class="btn btn-success" onclick="history.go(-1)">返回</a>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <!-- /page content -->

        </div>

    </div>
</div>

{include file="public_foot" /}

<!-- Datatables-->
<script src="__STATIC__/js/datatables/jquery.dataTables.min.js"></script>
<script src="__STATIC__/js/datatables/dataTables.bootstrap.js"></script>
<!-- validform -->
<script src="__STATIC__/js/Validform_v5.3.2_min.js"></script>
<script src="__STATIC__/js/layer.js"></script>
<!--select-->
<script src="__STATIC__/js/select/select2.full.min.js"></script>
<!--upload-->
<script type="text/javascript" src="__STATIC__/js/uploadPreview.js"></script>
<!-- daterangepicker -->
<script src="__STATIC__/js/datepicker/daterangepicker.js"></script>
<script>
    //validform
    $(function () {
        linkage_1();
        check();
        $.Tipmsg.r = null;

        var showmsg = function (msg) {
            //假定你的信息提示方法为showmsg， 在方法里可以接收参数msg，当然也可以接收到o及cssctl;
            alert(msg);
        }
        $("#registerForm").Validform({
            tiptype: function (msg) {
                layer.msg(msg);
            },
            tipSweep: true
        });
        // select2
        $(".select2_single").select2({
            placeholder: "请选择分类",
            allowClear: true
        });

        $(".select2_multiple").select2({
            maximumSelectionLength: 3,
            placeholder: "请选择关联商品",
            allowClear: true
        });
        // interval_timer
        $('#interval_timer').daterangepicker(null,
            function(start, end, label) {
                console.log(start.toISOString(), end.toISOString(), label);
        });
    });
    function saveData(){
        var selected_id = $('#selected_id').val();
        var selected_attr = [];
        $('.selected').each(function (i,o) {
            selected_attr[i]= $(o).text();
        });
        $.ajax({
            url:"{:url('client/shopGoodsCombo/new_attr')}",
            dataType:'json',
            type:'post',
            data:{'id':selected_id,'attribute':selected_attr.join(',')},
            success:function (t) {
                if (t.id != 0){
                    $('#tr_'+selected_id+' .market_price').text(t.market_price);
                    $('#tr_'+selected_id+' .old_price').text(t.price);
                    $('#tr_'+selected_id+' .showAttr_'+selected_id).text(selected_attr);
                    $('#tr_'+selected_id+' .showAttr_'+selected_id).prev('input').val(t.id);
                    statistics();
                }else{
                    layer.msg(t.message);
                }
            }
        })
    }
    function select_attr(o){
        $(o).addClass('selected').siblings('.goods_attr').removeClass('selected');
    }
    function begin (attr){
        var arr = attr.split(",");
        $('.goods_attr').each(function (i,o) {
            if ($.inArray($(o).text(),arr) != -1){
                $(o).addClass('selected');
            }
        })
    }
    //罗列已选商品
    function check(){
        var zhi = $('#ManySelect').val();
        var num = $('.select_goods').length;
        if (num < 3){$('.shop_goods_'+zhi).hide();}
        //判断是否选择过
        if($('#tr_'+zhi).length>0){alert('此商品已存在列表中');return false;}
        if (num == 3){alert('选取数量已达上限');return false}
        $.ajax({
            url:"{:url('client/shopGoodsCombo/set_out')}",
            type:'post',
            dataType:'html',
            data:{'id':zhi,'num':num},
            success:function(data){
                $('#Default').remove();
                $('#content').append(data);
                goods_sort();
                hide_goods();
                statistics(zhi);
            }
        })
    }
    //永恒隐藏已选元素
    function hide_goods(){
        var ids_num = $(".ids").length;
        var  over = [];
        if (ids_num > 0){
            $('.ids').each(function (i,o) {
                $('.shop_goods_'+$(o).val()).hide();
            })
        }
    }
    //自动排序
    function goods_sort(){
        var num = $('.sort').length;
        if (num > 0){
            $('.sort').each(function (i,o) {
                $(o).text(i+1);
            })
        }
    }
    //统计价格
    function statistics(){
        var total_1 = 0.00;
        var total_2 = 0.00;
        $('.old_price').each(function () {
            total_1 += parseFloat($(this).text());
        })
        $('#total_1').text(total_1.toFixed(2));
        $('.freight_price').each(function () {
            total_2 += parseFloat($(this).text());
        })
        $('#total_2').text(total_2.toFixed(2));
        //总计
        $('#total').text((total_1+total_2).toFixed(2));
        $('[name="total"]').val((total_1+total_2).toFixed(2));
        //套餐价格
        $("[name='combo_price']").val((total_1+total_2).toFixed(2));
    }
    //移除列表商品
    function remove(id){
        $('#tr_'+id).remove();
        $('.shop_goods_'+id).show();
        var num = $('.select_goods').length;
        if (num === 0){
            $('#content').append("<tr id='Default'><td colspan='8'><div style='font-size:24px;margin:30px 0;'>未选择商品</div></td></tr>");
        }
        goods_sort();
        statistics();
    }
    //联动
    function linkage_1(){
        var pid = $('#lev_1').val();
        $.post("{:url('client/shopGoodsCombo/linkage')}",{'type_id':pid},function (d) {
            $('#span_1').html(d);
            hide_goods();
        })
    }
    //属性选择
    function dialog(id){
        var attr = $('.showAttr_'+id).text();
        $.ajax({
            url:"{:url('client/shopGoodsCombo/attr_select')}",
            type:'post',
            data :{'id':id},
            dataType:'html',
            success:function(t){
                $('#attr_content').html(t);
                begin(attr);
            }
        })
    }
    //元素向下移动
    function move(id){
        var num = $('#content').children('tr').length;
        var item = $('#tr_'+id);
        var down_item = item.next('.select_goods');
        if (num >=2){
            if (down_item.length == 0) {
                item.insertBefore($("#content").children(".select_goods:first"));
            } else {
                item.insertAfter(down_item);
            }
        }
        goods_sort();
    }
    //检查提交的数据
    function checkData(){
        if ($('#content').children('.select_goods').length < 2){
            layer.msg('套餐的商品数量应大于2种!');
            return false;
        }
        if ($("[name='title']").val().length > 10){
            layer.msg('标题字数过长!');
            return false;
        }
        var combo = $("[name='combo_price']");
        var total = $("#total");
        if (parseFloat(combo.val()) > parseFloat(total.text())){
            combo.val(total.text());
        }
        return true;
    }
</script>
</body>

</html>
